<!-- 这个是登录的页面 -->
<template>
  <div class="login_container">
    <!-- 登录的表单 -->
    <div class="login_box">
      <div class="avatar_box">
        <!-- 头像 -->
        <img src="@/assets/logo.png" alt="图标的样式" />
      </div>

      <!-- 表单位置 -->
      <el-form
        ref="loginFormRef"
        :rules="loginRules"
        :model="loginForm"
        class="login_form"
        label-width="80px"
      >
        <el-form-item label="用户名"  prop="username">
          <!-- 直接使用这个框架里面的icon -->
          <!-- <el-input
                v-model="loginForm.username"
                prefix-icon="el-icon-user-solid"
              ></el-input> -->

          <el-input
            v-model="loginForm.username"
            prefix-icon="iconfont icondenglu"
          ></el-input>
        </el-form-item>
        <el-form-item  label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="iconfont iconmima"
            type="password"
          ></el-input>
          <!-- <el-input
                v-model="loginForm.password"
                prefix-icon="el-icon-search"
              ></el-input> -->
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="handleLogin">提交</el-button>
          <el-button type="success" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //表单数据
      loginForm: {
        username: "",
        password: "",
      },
      //验证对象
      loginRules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 5, max: 11, message: "长度在 5 到 11 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码名称", trigger: "blur" },
          { min: 5, max: 11, message: "长度在 5 到 11 个字符", trigger: "blur" },
        ],
      },
    };
  },

  methods:{
      handleReset(){

          //通过重置表单可以做到这个表单的信息进行重置
          this.$refs.loginFormRef.resetFields();
      },
      handleLogin(){
          //在这个地方可以帮我们验证是否成功，成功了就是成功了，然后就可以编写其他的代码了
          this.$refs.loginFormRef.validate(async valid=>{
              if(valid){            //如果验证成功
                //首相在这个地方，返回的是一个对象，而且这个地想里面含有很多数据，
                //在这个地方主要使用的就是这个解析的语法，在这个地方就可以很好的使用这个语法了，然后就可以很好的之后的访问了

                //然后在这个地方是进行处理这个登录的，然后就可以很好的进行这个之后的操作。
                if (this.loginForm.username=="admin"&&this.loginForm.password=="123456") {
                    this.$message.success("登录成功！")         //信息提示
                    let info = {username:"admin",password:"123456"}
                    localStorage.setItem('token',JSON.stringify(info))          //存储这个user对象，然后就是一个ui来进行这个操作。保存在这个session里面
                    this.$router.push("home")
                }else{
                    this.$message.warning("登录失败！")         //信息的提示
                }
              }else{            //如果失败
                return
              }
          });
      }

  }
};
</script>


<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #eee;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.btns {
  display: flex;
  justify-content: flex-end;
}

.login_form {
  position: absolute;
  bottom: 0%;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
</style>
